<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import { parseGeoData } from '@/utils/parseGeoData'

const geoData = parseGeoData()
const IntensityCount = geoData.intensityCounts

const intensityData = Object.keys(IntensityCount).map((intensity) => ({
  name: intensity,
  value: IntensityCount[intensity]
}))

// ECharts配置项
const colors = ['#5470C6', '#91CC75', '#EE6666'];
const option = {
  toolbox: {
    show: true,
    orient: "vertical",
    left:'left',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: true },
    }
  },
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: intensityData.map((item) => item.name),
    axisLabel: {
      rotate: 30,
      fontSize: 12,
      color: '#fff'
    },
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value',
    name: '地震级数',
    nameTextStyle: {
      color: '#fff'
    },
    axisLabel: {
      formatter: '{value} ',
      fontSize: 12,
      color: '#fff'
    },
    axisLine: {
      lineStyle: {
        color: colors[0]
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#ccc'],
        width: 1,
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '发生总数',
    type: 'bar',
    barWidth: '60%',
    data: intensityData.map((item) => item.value),
    itemStyle: {
      borderRadius: 5
    },
    // label: {
    //   show: true,
    //   position: 'top',
    //   fontSize: 12,
    //   color: '#333'
    // }
  }],
  legend: {
    data: ['发生总数'],
    top: '1%',
    textStyle: {
      color: '#fff'
    }
  },
  backgroundColor: ' transparent'
};

onMounted(() => {
  const chart = echarts.init(document.getElementById('intensity-bar-chart'));
  chart.setOption(option);
})
</script>

<template>
  <div class="chart-container">
    <div id="intensity-bar-chart" style="width: 500px; height: 160px"></div>
  </div>
</template>


<style scoped>
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: transparent;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

